<template>
  <div class="home">
    <div class="header">
      <div class="logo"><i class="iconfont iconnew"></i></div>
      <router-link to="/search" class="search">
        <i class="iconfont iconsearch"></i>
        <span>搜索新闻</span>
      </router-link>
      <span @click="loginFn" class="user"><i class="iconfont iconwode"></i></span>
    </div>
    <van-tabs class="home-tabs" v-model="active" sticky swipeable >
      <van-tab 
         v-for="item in categoryList"
         :key="item.id"
         :title="item.name"
      > 
      <!-- 下拉刷新 -->
        <van-pull-refresh v-model="item.isLoading" @refresh="onRefresh">
           <van-list
              v-model="item.loading"
              :finished="item.finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
             <MyPost
               v-for="item2 in item.postList"
               :key="item2.id"
               :post="item2"
             ></MyPost>
           </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {getCategoryAPI} from '../apis/calegory'
import {getToken,getCate,getUserId} from '../utils/localData'
import {getPostAPI} from '../apis/news'
import MyPost from'../components/MyPost.vue'

export default {
  data () {
    return {
      // 默认情况下，都是让头条项高亮，有 token 的话头条的下标是 1
      active: getToken()?1:0,
      // 栏目列表 - 优先读取存储中的列表
      categoryList:getCate(),
      // 新闻列表
      postList:[],
    }
  },
  components: {
    MyPost,
  },
  async created () {
   
       // 本地存储没有栏目数据
    if (this.categoryList.length === 0) {
      // 获取栏目数据
      const res = await getCategoryAPI();
      // console.log(res);
      // 🔔 把后端返回的数据进行改造
      this.categoryList = res.data.data;
    } else {
      // 本地存储 - 没有关注和头条项目
      //  已登录 - 添加关注和头条 2 项
      if (getToken()) {
        this.categoryList.unshift(
          { id: 0, name: "关注", is_top: 1 },
          { id: 999, name: "头条", is_top: 1 }
        );
        //  未登录 - 添加 头条 1 项
      } else {
        this.categoryList.unshift({ id: 999, name: "头条", is_top: 1 });
      }
    }
       // 🔔 不管使用的是本地的数据,还是请求回来的数据,都需要通过 map 处理
      this.categoryList=this.categoryList.map((item)=>{
      return {
        ...item,         // 保留后端返回的栏目数据，
        postList:[],     // 每个栏目都有的新闻数据
        pageIndex:1,     // 每个栏目都有页码
        pageSize:2,      //每个栏目都有页容量
        loading:false,   // loading=true，则显示 加载中... 提示，不会触发 onLoad 事件了
        finished:false,  // finished=true，则显示 没有更多了 提示，也不会触发 onLoad 事件了，级别比 loading 更高
        isLoading:false, // isLoading=true，显示 下拉组件 的加载中提示
      }
    })
    this.getPostListData()
  },
  // 注意点1：获取到DOM元素，需要在组件挂载完毕后
  mounted () {
    const tabsDOM = document.querySelector('.van-sticky')
    // console.log(tabsDOM)
     // 注意点2：注意用箭头函数，否者 this 会出问题
    tabsDOM.addEventListener('click',(e)=>{
      // e.target 触发事件的真实 DOM 元素
      // console.log('你点击',e.target)
      if (e.target.className.indexOf('van-sticky') !==-1){
        console.log('你点击')
        // 🔔 跳转到栏目管理页
        this.$router.push({path:'/category'})
      }else{
        console.log('栏目')
      }
    })
  },
  methods: {
    loginFn(){
      const id = getUserId()
      if(id){
        this.$router.push({path:"/user",query:{id}})
      }else{
        this.$router.push({path:"/login"})
      }
    },
    onRefresh(){
      console.log("onRefresh下拉时触发的函数");
      // 清空所有的新闻
      this.categoryList[this.active].postList=[]
      // 页码重置为 1
      this.categoryList[this.active].pageIndex=1
      // 隐藏分页组件的加载完成提示
      this.categoryList[this.active].finished=false
      
      this.categoryList[this.active].loading=true
      // 根据新的页码，重新请求数据
      this.getPostListData()
    },
    // 当列表即将滚动到底部时，自动触发onLoad函数
    onLoad(){
      // 当前栏目页码 +1
      this.categoryList[this.active].pageIndex++;
      // 根据最新页码再请求栏目数据
      this.getPostListData()
    },
    async getPostListData(){
      // 根据栏目选中的栏目获取请求时所需的 id
      // const activeCateId=this.categoryList[this.active].id;
      const {
            id:category,
            pageIndex,
            pageSize,
            postList
        }=this.categoryList[this.active];
        // console.log(activeCateId);
      // 根据栏目 id 获取栏目对应的新闻
      const res2=await getPostAPI({
            category,
            pageIndex,
            pageSize,
        })
      console.log(res2)
       // 新闻的数据绑定
      // this.postList = res2.data.data;
      // 把栏目对应的新闻放到栏目数组内
      // this.categoryList[this.active].postList.push(...res2.data.data)
      // 如果后端返回的数组已经为空(没有更多数据了)
      if(res2.data.data.length===0){
        // 需要主动显示加载完毕，finished = true，onLoad 就不会再触发了
        this.categoryList[this.active].finished=true;
      }
      // 把栏目对应的新闻放到栏目数组内
      postList.push(...res2.data.data)
       // 数据加载完毕后，需要主动隐藏加载中的提示
      this.categoryList[this.active].loading=false;
      // 需要主动隐藏下拉插件的加载中的提示
      this.categoryList[this.active].isLoading=false;
    }
  },
  // 监听栏目下标的变化
  watch: {
    active(){
      // console.log("active下标变化了", this.active);
      if(this.categoryList[this.active].postList.length===0){
            // 调用封装后的获取列表数据函数
          this.getPostListData()
      }
      
    }
  }
}
</script>
<style lang="less" scoped>
.home-tabs{
   // 在 tabs 标签栏上右侧添加一个图标，用于进入栏目管理页面
  /deep/.van-sticky{
    padding-right: 30px;
    &::after {
      content: "+";
      font-size: 30px;
      position: absolute;
      right: 0;
      top: 0;
      width: 45px;
      height: 45px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color:#fff;
    }
  }
}
.header {
  height: 50px;
  background-color: #ff0000;
  color: #fff;
  display: flex;
  align-items: center;
  .logo {
    width: 70px;
    text-align: center;
    .iconnew {
      font-size: 50px;
    }
  }

  .search {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.4);
    height: 34px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .iconsearch {
      margin-right: 5px;
      margin-top: 4px;
    }
  }

  .user {
    width: 70px;
    text-align: center;
    color: #fff;
    .iconwode {
      font-size: 30px;
    }
  }
}
</style>